import './App.css';

import React, { Component,lazy,Suspense } from 'react';
import { Route,Redirect,Switch } from 'react-router-dom'
import Loading from './components/Loading'

// import Index from './views/Index'
// import Search from './views/Search'
// import Login from './views/Login'
// import Register from './views/Register'
// import NotFound from './views/NotFound'


//正常导入的组件(没有用lazy函数处理)会被集中打包到一个js文件中, 会导致js文件体积变大.

//用lazy函数处理过的组件,会变成"懒加载组件", 在项目打包时,对应的组件会被单独打包成一个js文件. 当用户访问这个组件对应的路由时才会临时加载这个组件对应的js文件, 在用户访问项目首页时,由于只访问了必须访问的几个路由, 也只会加载很少的几个js文件, 网页打开速度就会提升. 
var Index = lazy(()=>import('./views/Index'))
var Search = lazy(()=>import('./views/Search'))
var Detail = lazy(()=>import('./views/Detail'))
var Login = lazy(()=>import('./views/Login'))
var Register = lazy(()=>import('./views/Register'))
var NotFound = lazy(()=>import('./views/NotFound'))
var Kefu=lazy(()=>import("./views/KeFu"))
// import MyCollect from './views/MyCollect';
var MyCollect =lazy(()=>import("./views/Collect"))
// import ShopCar from './views/ShopCar';
// var ShopCar = lazy(()=>import("./views/ShopCar"))
class App extends Component {
  render() {
    return (
      <div className='app'>
        
        {/* BrowserRouter , HashRouter, 路由管理组件, 必须包裹在路由组件的外面 */}

        {/* 定义一级路由规则 */}
        {/* Route 用来定义路由规则, path指定路由地址, component指定路由地址对应的组件, Route组件本身就充当router-view的作用 */}
        {/* Switch 从上往下依次比较每个路由, 一旦匹配到某条路由, 则停止匹配, 渲染匹配到的路由组件 */}
        {/* Redirect 定义重定向路由规则, 当浏览器中的地址和 from 属性的地址匹配时, 则直接重定向到to属性的地址 */}
        {/* 404路由 , path="*" 表示匹配任何其他路由 */}

        {/* 如果某个组件中有嵌套路由, 则当前组件对应的路由规则就不能添加exact属性 */}
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route path="/index" component={Index} />   
            {/* <Route exact path="/search/:id" component={Search} />*/}
            <Route exact path="/search" component={Search} />   
            <Route exact path="/detail/:goodid" component={Detail} />   
            <Route exact path="/login" component={Login} />   
            <Route exact path="/register" component={Register} />
            {/* 收藏页面 */}
            <Route exact path="/collect" component={MyCollect} />

            {/* 客服 */}
            <Route exact path="/kefu" component={Kefu} />
            <Redirect exact from="/" to="/login" />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>

      </div>
    );
  }
}

export default App;
